<template>
	<view class="custom-button">
		<button v-if="type == 'primary'" class="primary" :style="{
			width,
			height,
			border: plain ? '2rpx solid #f23f5d' : 0,
			color: plain ? '#f23f5d' : '#ffffff',
			background: plain ? 'transparent' : '#f23f5d',
			borderRadius: shape ? height : '10rpx',
			fontWeight: bold ? 'bold' : 'normal'
		}" hover-class="hover">
			<slot></slot>
		</button>
		<button v-else-if="type == 'info'" class="info" :style="{
			width,
			height,
			border: plain ? '2rpx solid #999999' : 0,
			color: plain ? '#999999' : '#ffffff',
			background: plain ? 'transparent' : '#999999',
			borderRadius: shape ? height : '10rpx',
			fontWeight: bold ? 'bold' : 'normal'
		}" hover-class="hover">
			<slot></slot>
		</button>
		<button v-else-if="type == 'default'" class="default" :style="{
			width,
			height,
			border: plain ? '2rpx solid #000' : 0,
			color: plain ? '#000' : '#ffffff',
			background: plain ? 'transparent' : '#222',
			borderRadius: shape ? height : '10rpx',
			fontWeight: bold ? 'bold' : 'normal'
		}" hover-class="hover">
			<slot></slot>
		</button>
	</view>
</template>

<script>
	export default {
		name:"custom-button",
		props: {
			type: {
				type: String,
				default: 'primary'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '70rpx'
			},
			bold: {
				type: Boolean,
				default: false
			},
			shape: {
				type: Boolean,
				default: false
			},
			plain: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.custom-button{
		width: 100%;
		height: 100%;
		.primary{
			@include flex-center;
			background-color: $primary;
			color: $white;
			font-size: $fs-28;
			padding: 0 30rpx;
			&.hover{
				color: $background-grey !important;
				background-color: $primary-hover !important;
			}
		}
		.info{
			@include flex-center;
			background-color: $grey;
			color: $white;
			font-size: $fs-28;
			padding: 0 30rpx;
			&.hover{
				color: $background-grey !important;
				background-color: $grey-hover !important;
			}
		}
		.default{
			@include flex-center;
			background-color: $grey;
			color: $white;
			font-weight: bold;
			font-size: $fs-28;
			padding: 0 30rpx;
			&.hover{
				color: $background-grey !important;
				background-color: $grey-hover !important;
			}
		}
	}
</style>